<template>
    <div class="analyse">
        <div class="container">
            <div class="header">
                <div>
                    <span></span>
                    <h1>分析中心</h1>
                </div>
            </div>
            <div class="conter">
            <div class="show-box">
                <p>发起视角</p>
                <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="#"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="ip"
                    label="ip"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="fa_lei"
                    label="发起者类型"
                    width="120"
                    >
                </el-table-column>
                <el-table-column
                    prop="zuzi"
                    label="所属资产组织"
                    width="140"
                    >
                </el-table-column>
                <el-table-column
                    prop="weixie"
                    label="威胁类型"
                    width="280"
                    >
                </el-table-column>
                <el-table-column
                    prop="shouhai_shu"
                    label="遭受害者数"
                    width="120"
                    >
                </el-table-column>
                <el-table-column
                    prop="shouhai_lei"
                    label="遭受害者类型"
                    width="130"
                    >
                </el-table-column>
                <el-table-column
                    prop="rizhi"
                    label="日志"
                    width="100"
                    >
                </el-table-column>
                </el-table>
            </div>
            <div class="show-box">
                <p>遭受视角</p>
                <el-table
                :data="tablesData"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="#"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="ip"
                    label="ip"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="fa_lei"
                    label="发起者类型"
                    width="120"
                    >
                </el-table-column>
                <el-table-column
                    prop="zuzi"
                    label="所属资产组织"
                    width="140"
                    >
                </el-table-column>
                <el-table-column
                    prop="weixie"
                    label="威胁类型"
                    width="280"
                    >
                </el-table-column>
                <el-table-column
                    prop="shouhai_shu"
                    label="遭受害者数"
                    width="120"
                    >
                </el-table-column>
                <el-table-column
                    prop="shouhai_lei"
                    label="遭受害者类型"
                    width="130"
                    >
                </el-table-column>
                <el-table-column
                    prop="rizhi"
                    label="日志"
                    width="100"
                    >
                </el-table-column>
                </el-table>
            </div>
        </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData:[
                {
                    id:1,
                    ip:'10.10.2.12',
                    fa_lei:'终端',
                    zuzi:'A2',
                    weixie:'违规访问(19)次、可疑行为(16)次',
                    shouhai_shu:'5',
                    shouhai_lei:'终端',
                    rizhi:'35'
                },
                {
                    id:2,
                    ip:'10.10.1.9',
                    fa_lei:'终端',
                    zuzi:'A1',
                    weixie:'风险访问（20）、可疑行为（5）次、违规访问（11）次',
                    shouhai_shu:'18',
                    shouhai_lei:'终端',
                    rizhi:'36'
                },
                {
                    id:3,
                    ip:'10.10.3.100',
                    fa_lei:'终端',
                    zuzi:'B1',
                    weixie:'拒绝服务（50）次、违规访问（75次）',
                    shouhai_shu:'30',
                    shouhai_lei:'终端',
                    rizhi:'125'
                },
            ],
            tablesData:[
                {
                    id:1,
                    ip:'10.10.5.103',
                    fa_lei:'终端',
                    zuzi:'C1',
                    weixie:'违规访问(19)次、可疑行为(16)次',
                    shouhai_shu:'5',
                    shouhai_lei:'终端',
                    rizhi:'35'
                },
                {
                    id:2,
                    ip:'10.10.1.9,192.168.1.101',
                    fa_lei:'终端',
                    zuzi:'C2',
                    weixie:'风险访问（20）、可疑行为（5）次、违规访问（11）次',
                    shouhai_shu:'18',
                    shouhai_lei:'终端',
                    rizhi:'36'
                },
                {
                    id:3,
                    ip:'192.168.1.100',
                    fa_lei:'服务器',
                    zuzi:'B1',
                    weixie:'拒绝服务（50）次、违规访问（75次）',
                    shouhai_shu:'30',
                    shouhai_lei:'终端',
                    rizhi:'125'
                },
            ]
        }
    }
}
</script>
<style lang="less" scoped>
body{
    background-color: rgb(245, 246, 250);  
}
ul,li{
    list-style: none;
}

.analyse{
    // background-color: rgb(245, 246, 250);
    overflow: hidden;
    margin-top: 15px;
}
.container{
    width: 1200px;
    margin: 0 auto;
}
.header{
    height: 75px;
    background-color: rgb(251, 252, 253);
    
}
.header div{
    display: flex;
    align-items:center;
    margin-left: 30px;
    height: 100%;
}
.header div h1{
    font-size: 24px;
    margin: 0;
}
.header span{
    background-color: rgb(8, 197, 115);
    width: 8px;
    height: 28px;
    margin-right: 10px;
}
.show-box{
    background-color:white ;
}
.show-box h2{
    margin-left: 30px;
}
.show-box ul{
    display: flex;
    padding: 0;
    border-top:1px solid rgb(235, 237, 238) ;
    height: 40px;
    line-height: 40px;
    margin: 0;
}
 li{
    flex: 1;
}
.id{
    flex-grow: 0.5;
}
.weixie{
   flex-grow:2;
}
#title{
    font-weight: bold;
    font-size: 14px;
    border-bottom:1px solid rgb(235, 237, 238);
    height: 50px;
}
#title li{
    line-height: 50px;
}
.show-box{
    font-size: 14px;
    padding: 15px 30px 30px;
    margin-bottom: 20px;
}
.show-box p {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    margin-left: 10px;
    height: 40px;
    
}
</style>